<template>
  <div class="img-warehouse">
    <div class="btn">
      <el-button type="primary" @click="$refs.upLoadImg.showFn()">
        上传图片<el-icon class="el-icon--right"></el-icon>
      </el-button>
    </div>

    <el-divider />

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ImgId" prop="id" width="180"> </el-table-column>

      <el-table-column label="图片" width="180">
        <template #default="scope">
          <div style="width: 20px; height: 20px" @click="showImgFn(scope.row)">
            <img
              style="width: 100%"
              :src="'data:image/png;base64,' + scope.row.img"
              alt=""
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="是否买卖" prop="isBuy" width="180">
        <template #default="scope">
          <el-switch v-model="scope.row.isBuy" disabled />
        </template>
      </el-table-column>

      <el-table-column label="价格" prop="price" width="180">
        <template #default="scope">
          <span style="color: red"> ￥{{ scope.row.price }} </span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="deleteDataFn(scope.row)"
          >
            删除
          </el-button>

          <el-button size="small" type="primary" @click="configImg(scope.row)">
            配置图片权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 图片预览 -->
    <showImg ref="showImg"></showImg>
    <!-- 上传图片 -->
    <upLoadImg ref="upLoadImg" @search="getImg"></upLoadImg>
    <!-- 配置图片权限 -->
    <configImg ref="configImg" @search="getImg"></configImg>
  </div>
</template>

<script>
import showImg from './model/showImg.vue'
import upLoadImg from './model/upLoadImg.vue'
import configImg from './model/configImg.vue'
import { getImage, deleteImage } from '@/api/content.js'

export default {
  components: {
    showImg,
    upLoadImg,
    configImg
  },
  data () {
    return {
      tableData: [],
      showImg: false
    };
  },
  mounted () {
    this.getImg()
  },
  methods: {
    // 查看图片
    showImgFn (row) {
      this.$refs.showImg.showFn(row)
    },
    deleteDataFn (row) {
      this.$confirm('是否确认删除此图片？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDataAjax(row)
      }).catch(() => {
        // 取消逻辑
      })
    },
    // 删除
    deleteDataAjax (row) {
      deleteImage({
        id: row.id
      }).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getImg()
        }
      })
    },
    // 配置图片权限
    configImg (row) {
      this.$refs.configImg.showFn(row)
    },
    // 获取图片
    getImg () {
      const userId = sessionStorage.getItem('userId')
      getImage({
        userId: userId
      }).then(res => {
        if (res.success) {
          this.tableData = res.data
        }
      })
    }
  }
};
</script>

<style scoped>
.img-warehouse {
  width: 1200px;
  margin: auto;
  background: #fff;
}
.btn {
  padding: 10px 20px;
}
</style>
